
.ellipsis,.ellipsis1,.ellipsis2,.ellipsis3{
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display:-webkit-box;
  }
  .ellipsis1{
    -webkit-line-clamp: 1;
  }
  .ellipsis2{
    -webkit-line-clamp: 2;
  }
  .ellipsis3{
    -webkit-line-clamp: 3;
  }
  .text-nowrap{
    white-space:nowrap;
  }
  .text-wrap{
    word-wrap:break-word;
  }
  /**flex layout*/
  /**http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html*/
  .web-box{
    display: -webkit-flex; /* Safari */
    display: flex;
    /**布局方式**/
    &.flex-direction{
      &-row{flex-direction: row;}
      &-row-reverse{flex-direction: row-reverse;}
      &-column{flex-direction: column;}
      &-column-reverse{flex-direction: column-reverse;}
    }
    /**换行**/
    &.flex-wrap{
      &-nowrap{flex-wrap: nowrap;}
      &-wrap{flex-wrap: wrap;}
      &-wrap-reverse{flex-wrap: wrap-reverse;}
    }
    /**横向对齐**/
    &.justify-content{
      &-start{justify-content: flex-start;}
      &-end{justify-content: flex-end;}
      &-center{justify-content: center;}
      &-space-between{justify-content: space-between;}
      &-space-around{justify-content: space-around;}
    }
    /**纵向对齐**/
    &.align-items{
      &-start{align-items:flex-start;}
      &-end{align-items:flex-end;}
      &-center{align-items:center;}
      &-baseline{align-items:baseline;}
      &-stretch{align-items:stretch;}
    }
    /**多根轴线的对齐方式**/
    &.align-content{
      &-start{align-content: flex-start;}
      &-end{align-content: flex-end;}
      &-center{align-content: center;}
      &-space-between{align-content: space-between;}
      &-space-around{align-content: space-around;}
    }
    /**order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0**/
    .flex-order{
      &--1{order: -1;}
      &-0{order: 0;}
      &-1{order: 1;}
      &-2{order: 2;}
      &-3{order: 3;}
      &-4{order: 4;}
    }
    /**flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大**/
    .flex-grow{
      &-0{flex-grow:0;}
      &-1{flex-grow:1;}
      &-2{flex-grow:2;}
      &-3{flex-grow:3;}
      &-4{flex-grow:4;}
      &-5{flex-grow:5;}
    }
    /**flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。**/
    .flex-shrink{
      &-0{flex-shrink:0;}
      &-1{flex-shrink:1;}
      &-2{flex-shrink:2;}
      &-3{flex-shrink:3;}
      &-4{flex-shrink:4;}
      &-5{flex-shrink:5;}
    }
    /**align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch**/
    .item-align-self{
      &-start{align-self:flex-start;}
      &-end{align-self:flex-end;}
      &-center{align-self:center;}
      &-baseline{align-self:baseline;}
      &-stretch{align-self:stretch;}
    }
  }

  .web{
    &-color{
      &-warn{
        color: @color-warn;
      }
      &-script{
        color: @color-script;
      }
    }
  }

  .border-table{
    width: 100%;
    border-top: 1px solid @border-color-base;
    border-left: 1px solid @border-color-base;
    border-collapse:collapse;
    border-spacing:0;
    text-align: left;
    tr td,
    tr th{
      border-right: 1px solid @border-color-base;
      border-bottom: 1px solid @border-color-base;
      padding: 8px 8px;
    }
    tr th{
      background: #F0F0F0;
    }
    .cell-center{
      text-align: center;
    }
  }
